<div class="grid">
    <div class="col-12 lg:col-6 xl:col-3">
        <div class="card mb-0">
            <div class="flex justify-content-between mb-3">
                <div>
                    <span class="block text-500 font-medium mb-3"
                        >阀栓总量</span
                    >
                    <div
                        style="
                            font-size: large;
                            font-weight: 900;
                            color: rgb(14, 37, 138);
                        "
                    >
                        {{ counts.total }}个
                    </div>
                </div>
            </div>
            <span class="font-medium" style="color: rgb(27, 90, 207)"
                >(安装总量)</span
            >
        </div>
    </div>
    <div class="col-12 lg:col-6 xl:col-3">
        <div class="card mb-0">
            <div class="flex justify-content-between mb-3">
                <div>
                    <span class="block text-500 font-medium mb-3"
                        >消防栓数量</span
                    >
                    <div
                        style="
                            font-size: large;
                            font-weight: 900;
                            color: rgb(14, 37, 138);
                        "
                    >
                        {{ counts.installedCounts }}个
                    </div>
                </div>
            </div>
            <span class="font-medium" style="color: rgb(27, 90, 207)"
                >(已安装)</span
            >
        </div>
    </div>
    <div class="col-12 lg:col-6 xl:col-3">
        <div class="card mb-0">
            <div class="flex justify-content-between mb-3">
                <div>
                    <span class="block text-500 font-medium mb-3"
                        >消防栓数量</span
                    >
                    <div
                        style="
                            font-size: large;
                            font-weight: 900;
                            color: rgb(14, 37, 138);
                        "
                    >
                        {{ counts.installedCounts }}个
                    </div>
                </div>
            </div>
            <span class="font-medium" style="color: rgb(27, 90, 207)"
                >(已安装)</span
            >
        </div>
    </div>
    <div class="col-12 lg:col-6 xl:col-3">
        <div class="card mb-0">
            <div class="flex justify-content-between mb-3">
                <div>
                    <span class="block text-500 font-medium mb-3"
                        >未安装阀栓</span
                    >
                    <div
                        style="
                            font-size: large;
                            font-weight: 900;
                            color: rgb(14, 37, 138);
                        "
                    >
                        {{ counts.unInstallCounts }}个
                    </div>
                </div>
            </div>
            <span class="font-medium" style="color: rgb(27, 90, 207)"
                >(未安装)</span
            >
        </div>
    </div>

    <div class="col-12 xl:col-6">
        <!--div class="card">
            <h5>Recent Sales</h5>
            <p-table [value]="products" [paginator]="true" [rows]="5" responsiveLayout="scroll">
                <ng-template pTemplate="header">
                    <tr>
                        <th>Image</th>
                        <th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
                        <th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
                        <th>View</th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-product>
                    <tr>
                        <td style="width: 15%; min-width: 5rem;">
                            <img src="assets/demo/images/product/{{product.image}}" class="shadow-4" alt="{{product.name}}" width="50">
                        </td>
                        <td style="width: 35%; min-width: 7rem;">{{product.name}}</td>
                        <td style="width: 35%; min-width: 8rem;">{{product.price | currency:'USD'}}</td>
                        <td style="width: 15%;">
                            <button pButton pRipple type="button" icon="pi pi-search" class="p-button p-component p-button-text p-button-icon-only"></button>
                        </td>
                    </tr>
                </ng-template>
            </p-table>
        </div>
        <div class="card">
            <div class="flex justify-content-between align-items-center mb-5">
                <h5>Best Selling Products</h5>
                <div>
                    <button pButton type="button" icon="pi pi-ellipsis-v" class="p-button-rounded p-button-text p-button-plain" (click)="menu.toggle($event)"></button>
                    <p-menu #menu [popup]="true" [model]="items"></p-menu>
                </div>
            </div>
            <ul class="list-none p-0 m-0">
                <li class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4">
                    <div>
                        <span class="text-900 font-medium mr-2 mb-1 md:mb-0">Space T-Shirt</span>
                        <div class="mt-1 text-600">Clothing</div>
                    </div>
                    <div class="mt-2 md:mt-0 flex align-items-center">
                        <div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" [ngStyle]="{height: '8px'}">
                            <div class="bg-orange-500 h-full" [ngStyle]="{width: '50%'}"></div>
                        </div>
                        <span class="text-orange-500 ml-3 font-medium">%50</span>
                    </div>
                </li>
                <li class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4">
                    <div>
                        <span class="text-900 font-medium mr-2 mb-1 md:mb-0">Portal Sticker</span>
                        <div class="mt-1 text-600">Accessories</div>
                    </div>
                    <div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
                        <div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" [ngStyle]="{height: '8px'}">
                            <div class="bg-cyan-500 h-full" [ngStyle]="{width: '16%'}"></div>
                        </div>
                        <span class="text-cyan-500 ml-3 font-medium">%16</span>
                    </div>
                </li>
                <li class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4">
                    <div>
                        <span class="text-900 font-medium mr-2 mb-1 md:mb-0">Supernova Sticker</span>
                        <div class="mt-1 text-600">Accessories</div>
                    </div>
                    <div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
                        <div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" [ngStyle]="{height: '8px'}">
                            <div class="bg-pink-500 h-full" [ngStyle]="{width: '67%'}"></div>
                        </div>
                        <span class="text-pink-500 ml-3 font-medium">%67</span>
                    </div>
                </li>
                <li class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4">
                    <div>
                        <span class="text-900 font-medium mr-2 mb-1 md:mb-0">Wonders Notebook</span>
                        <div class="mt-1 text-600">Office</div>
                    </div>
                    <div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
                        <div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" [ngStyle]="{height: '8px'}">
                            <div class="bg-green-500 h-full" [ngStyle]="{width: '35%'}"></div>
                        </div>
                        <span class="text-green-500 ml-3 font-medium">%35</span>
                    </div>
                </li>
                <li class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4">
                    <div>
                        <span class="text-900 font-medium mr-2 mb-1 md:mb-0">Mat Black Case</span>
                        <div class="mt-1 text-600">Accessories</div>
                    </div>
                    <div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
                        <div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" [ngStyle]="{height: '8px'}">
                            <div class="bg-purple-500 h-full" [ngStyle]="{width: '75%'}"></div>
                        </div>
                        <span class="text-purple-500 ml-3 font-medium">%75</span>
                    </div>
                </li>
                <li class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4">
                    <div>
                        <span class="text-900 font-medium mr-2 mb-1 md:mb-0">Robots T-Shirt</span>
                        <div class="mt-1 text-600">Clothing</div>
                    </div>
                    <div class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center">
                        <div class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem" [ngStyle]="{height: '8px'}">
                            <div class="bg-teal-500 h-full" [ngStyle]="{width: '40%'}"></div>
                        </div>
                        <span class="text-teal-500 ml-3 font-medium">%40</span>
                    </div>
                </li>
            </ul>
        </div-->
        <div class="card">
            <div style="display: flex">
                <h5 style="font-weight: 900">每月用水量</h5>
                <p-calendar
                    [(ngModel)]="currentYear2"
                    view="year"
                    dateFormat="yy年"
                    class="calendar"
                    (ngModelChange)="getTotalStatistics()"
                ></p-calendar>
            </div>

            <div style="display: flex; height: 100%">
                <p-chart
                    type="bar"
                    [data]="chartData2"
                    [options]="chartOptions"
                    style="height: 15em; width: 30em"
                    
                ></p-chart>
                <div class="infos" style="margin-top: 35px; margin-left: 1em">
                    <span class="infos-title">累计用水量</span><br />
                    <span class="num">{{totalcounts.sum}}</span>
                    <span>万m³</span>
                </div>
            </div>
        </div>
        <div class="card">
            <p-calendar
                [(ngModel)]="currentYear3"
                view="year"
                dateFormat="yy年"
                (ngModelChange)="getUserBar()"
            ></p-calendar>
            <p-chart
                type="bar"
                [data]="chartData"
                [options]="chartOptions"
            ></p-chart>
        </div>
    </div>

    <div class="col-12 xl:col-6">
        <div class="card" style="height: 21em">
            <h5 style="font-weight: 900">用水量排行</h5>
            <!--p-chart
                type="line"
                [data]="chartData"
                [options]="chartOptions"
            ></p-chart-->
            <p-table
                [value]="tableData"
                [rowHover]="true"
                [scrollable]="true"
                scrollHeight="16em"
                styleClass="p-datatable-gridlines"
            >
                <ng-template pTemplate="header">
                    <tr style="font-size: 17px; font-weight: 500;">
                        <th width="50%">监测井</th>
                        <th style="text-align: right" width="50%">
                            用水量(万m³)
                        </th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-item>
                    <tr style="font-size: 17px; font-weight: 500;margin-top: 10px;">
                        <th width="50%">{{ item.applicantName }}</th>
                        <th width="50%">{{ item.volume }}</th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="emptymessage">
                    <div style="width: 100%; height: 100%; text-align: center">
                        没有找到配额信息
                    </div>
                </ng-template>
            </p-table>
        </div>
        <div class="card">
            <p-calendar
                [(ngModel)]="currentYear"
                view="year"
                dateFormat="yy年及前两年"
                (ngModelChange)="getLinePic()"
            ></p-calendar>
            <p-chart
                type="line"
                [data]="chartData3"
                [options]="chartOptions"
            ></p-chart>
        </div>

        <!--div class="card">
            <div class="flex align-items-center justify-content-between mb-4">
                <h5>Notifications</h5>
                <div>
                    <button pButton type="button" icon="pi pi-ellipsis-v" class="p-button-rounded p-button-text p-button-plain" (click)="menu.toggle($event)"></button>
                    <p-menu #menu [popup]="true" [model]="items"></p-menu>
                </div>
            </div>

            <span class="block text-600 font-medium mb-3">TODAY</span>
            <ul class="p-0 mx-0 mt-0 mb-4 list-none">
                <li class="flex align-items-center py-2 border-bottom-1 surface-border">
                    <div class="w-3rem h-3rem flex align-items-center justify-content-center bg-blue-100 border-circle mr-3 flex-shrink-0">
                        <i class="pi pi-dollar text-xl text-blue-500"></i>
                    </div>
                    <span class="text-900 line-height-3">Richard Jones
                <span class="text-700"> has purchased a blue t-shirt for <span class="text-blue-500">79$</span></span>
            </span>
                </li>
                <li class="flex align-items-center py-2">
                    <div class="w-3rem h-3rem flex align-items-center justify-content-center bg-orange-100 border-circle mr-3 flex-shrink-0">
                        <i class="pi pi-download text-xl text-orange-500"></i>
                    </div>
                    <span class="text-700 line-height-3">Your request for withdrawal of <span class="text-blue-500 font-medium">2500$</span> has been initiated.</span>
                </li>
            </ul>

            <span class="block text-600 font-medium mb-3">YESTERDAY</span>
            <ul class="p-0 m-0 list-none">
                <li class="flex align-items-center py-2 border-bottom-1 surface-border">
                    <div class="w-3rem h-3rem flex align-items-center justify-content-center bg-blue-100 border-circle mr-3 flex-shrink-0">
                        <i class="pi pi-dollar text-xl text-blue-500"></i>
                    </div>
                    <span class="text-900 line-height-3">Keyser Wick
                <span class="text-700"> has purchased a black jacket for <span class="text-blue-500">59$</span></span>
            </span>
                </li>
                <li class="flex align-items-center py-2 border-bottom-1 surface-border">
                    <div class="w-3rem h-3rem flex align-items-center justify-content-center bg-pink-100 border-circle mr-3 flex-shrink-0">
                        <i class="pi pi-question text-xl text-pink-500"></i>
                    </div>
                    <span class="text-900 line-height-3">Jane Davis
                <span class="text-700"> has posted a new questions about your product.</span>
            </span>
                </li>
            </ul>
        </div-->

        <!--div class="px-4 py-5 shadow-2 flex flex-column md:flex-row md:align-items-center justify-content-between mb-3"
        [ngStyle]="{borderRadius: '1rem', background: 'linear-gradient(0deg, rgba(0, 123, 255, 0.5), rgba(0, 123, 255, 0.5)), linear-gradient(92.54deg, #1C80CF 47.88%, #FFFFFF 100.01%)'}">
       <div>
           <div class="text-blue-100 font-medium text-xl mt-2 mb-3">TAKE THE NEXT STEP</div>
           <div class="text-white font-medium text-5xl">Try PrimeBlocks</div>
       </div>
       <div class="mt-4 mr-auto md:mt-0 md:mr-0">
           <a target="_blank" href="https://www.primefaces.org/primeblocks-ng" class="p-button font-bold px-5 py-3 p-button-warning p-button-rounded p-button-raised">
               Get Started
           </a>
       </div>
       </div-->
    </div>
</div>
